

<script>
import { reactive } from '../../components/vue.api';
import { json } from 'quick.lib'
import { testTbCol, testTbData, testTreeData, testTreeApiData } from './test-data'
// 弹窗
import { confirm, message, frame } from '@/components';

export default {
  setup () {
    const the = reactive({
      my: {
        treeId: null,
      },
      tree: {
        /** 点击节点 */
        active: '0.1',
        onItem: {},
        list: [],
        // list: [{
        //   title: '组织',
        //   key: '1',
        //   http: {
        //     url: '/tree/1'
        //   },
        //   children: []
        // }, {
        //   title: '角色',
        //   key: '2',
        //   http: {
        //     url: '/tree/2'
        //   },
        //   children: []
        // }]
      },
      tabs: {
        active: 0,
        list: [
          {
            title: '架构关系'
          },
          {
            title: '架构分组'
          }, {
            title: '树编辑'
          }]
      },
      tb: {
        tba: {
          // 默认选择
          checkeds: [],
          cols: testTbCol,
          data: [],
        },
        tbb: {
          // 默认选择
          checkeds: [],
          cols: testTbCol,
          data: [],
        }
      }
    })

    the.tree.list = testTreeApiData


    /**
     * 获取对象
     */
    const getTree = (resp) => {

      console.log('getTree:', resp.active);

      json.find({
        // 数据源
        data: testTreeData,
        // 搜索子项节点
        // subs: 'children',
        // 查询条件
        where: `data.key=="${resp.item.key}"`,
        //异步回调(对象,level:层次,序号)
        callback: (obj, level, index) => {
          console.log('find2:', level, index)

          if (obj && obj.children) {
            // console.log('find3:', JSON.stringify(obj))
            /**
             * 回调树节点绑定
             * @param {*} resp 子节点数组
             */
            resp.bind(obj.children)
            return 1;
          }
        }
      })
    }


    const onTreeEvent = (resp) => {
      console.log('onTreeEvent', resp)

      switch (resp.cmd) {
        case 'open':
          // 打开
          getTree(resp)
          break;

        case 'click':
          // 点击触发
          the.tree.onItem = resp.item
          break

        case 'check':
          //勾选
          console.log('onTreeEvent.check', resp)
          break
      }
    }


    /** 
    * 表格触发事件
    * 
    */
    const tableEvent = (resp) => {
      // 触发事件
      switch (resp.cmd) {
        case 'check':
          // 表格勾选
          the.tb.tba.checkeds = resp.list
          break;
        default:
          console.log('test.tableEvent', JSON.stringify(resp))
          break;
      }
    }

    const btnEvent = () => {
      // 表格选中的，与树点击的
      console.log(JSON.stringify(the.tb.tba.checkeds), JSON.stringify(the.tree.onItem))
    }

    const onPanelTreeEvent = (resp) => {
      console.log('onPanelTreeEvent', JSON.stringify(resp));
      switch (resp.cmd) {
        // case 'close':
        //   resp.close()
        //   break;
        default:
          break;
      }
    }

    const InputEvent = (resp) => {

      switch (resp.cmd) {
        case 'InputPlusTree': //点击取树
          confirm({
            footerHide: true,
            title: '查询',
            model: {
              props: {
                data: the.tree.list
              },
              component: 'Tree'
            },
            onEvent: onPanelTreeEvent
          })
          break;

        default:
          break;
      }
    }

    const init = () => {
      the.tb.tba.data = testTbData;
      the.tb.tbb.data = testTbData;
    }

    // init();

    return { the, onTreeEvent, tableEvent, btnEvent, InputEvent }
  }
}

</script>

<template>
  <div class="tree-test-page">
    <Row>
      <Col span="6">
      {{ the.tree.onItem }}
      <Tree :data="the.tree.list"
            :active="the.tree.active"
            :checked="true"
            @onEvent="onTreeEvent" />
      </Col>
      <Col span="18">
      <Tabs scrolled
            :list="the.tabs.list"
            :active="the.tabs.active">
        <template #qv-tabs-0>
          <Button @click="btnEvent">
            绑定树关系
          </Button>
          <Table border
                 :columns="the.tb.tba.cols"
                 :data="the.tb.tba.data"
                 :checkeds="the.tb.tba.checkeds"
                 show-check
                 show-foot
                 @onEvent="tableEvent" />
        </template>
        <template #qv-tabs-1>
          <Table border
                 :columns="the.tb.tbb.cols"
                 :data="the.tb.tbb.data"
                 :checkeds="the.tb.tbb.checkeds"
                 show-check
                 show-foot
                 @onEvent="tableEvent" />
        </template>
        <template #qv-tabs-2>
          <Input v-model="the.my.treeId"
                 style="width:5rem"
                 cmd="InputPlusTree"
                 icon="icon-database"
                 @onEvent="InputEvent" />
        </template>
      </Tabs>
      </Col>
      <Row>
      </row>
    </row>
  </div>
</template>

<style lang='less'>
.tree-test-page {
  .qv-tree {
    margin: 0.5rem;
  }
}
</style>